<template>
  <div class="page visit-page">
    <nav-bar title="巡查走访" theme="white" search message></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <!-- 网格巡查 -->
      <div class="visit-entry">
        <div class="visit-entry-title">
          <img class="visit-entry-title--img" src="@/assets/images/inspectVisit/title_grid@2x.png" alt="" />
        </div>
        <gb-card shadow class="visit-entry-content">
          <van-row>
            <van-col :span="6" v-for="(item, key) in gridOptions" :key="key" align="center">
              <div class="visit-entry-item" @click="$router.push(item.path)">
                <!-- <template>
                  <van-badge :content="item.count" max="99">
                    <img :src="item.iconPath" class="visit-entry-item--img" alt="" />
                  </van-badge>
                </template> -->
                <template>
                  <img :src="item.iconPath" class="visit-entry-item--img" alt="" />
                </template>
                <p class="visit-entry-item--text">{{ item.text }}</p>
              </div>
            </van-col>
          </van-row>
        </gb-card>
      </div>
      <!-- 巡查记录 -->
      <div class="visit-entry">
        <div class="visit-entry-title">
          <img class="visit-entry-title--img" src="@/assets/images/inspectVisit/title_inspection@2x.png" alt="" />
        </div>
        <gb-card shadow class="visit-entry-content">
          <van-row>
            <van-col :span="6" v-for="(item, key) in inspectionOptions" :key="key" align="center">
              <div class="visit-entry-item" @click="$router.push(item.path)">
                <img :src="item.iconPath" class="visit-entry-item--img" alt="" />
                <p class="visit-entry-item--text">{{ item.text }}</p>
              </div>
            </van-col>
          </van-row>
        </gb-card>
      </div>
      <!-- 人员走访 -->
      <div class="visit-entry">
        <div class="visit-entry-title">
          <img class="visit-entry-title--img" src="@/assets/images/inspectVisit/title_person@2x.png" alt="" />
        </div>
        <gb-card shadow class="visit-entry-content" v-for="(labels, type) in personOptions" :key="type">
          <van-cell
            :title="personType[type].name"
            value="查看全部"
            size="large"
            is-link
            :border="false"
            :to="`/inspectvisit/visit/list?labelIndex=${[personType[type].index, 0]}&labelType=${type}&labelName=${
              personType[type].name
            }`"
          />
          <van-row>
            <van-col :span="6" v-for="(item, key) in labels" :key="key" align="center">
              <div
                v-if="key < 4"
                class="visit-entry-item"
                @click="
                  $router.push({
                    path: '/inspectvisit/visit/list',
                    query: {
                      // 标签类型索引（用于弹窗回显）
                      labelIndex: [personType[type].index, key],
                      // 标签类型
                      labelType: type,
                      // 标签编码
                      labelCode: item.labelCode,
                      // 标签名称（用于页面回显）
                      labelName: personType[type].name + ' - ' + item.labelName
                    }
                  })
                "
              >
                <template v-if="personCount[item.labelCode] > 0">
                  <van-badge :content="personCount[item.labelCode]" max="99">
                    <img
                      :src="require(`@/assets/images/inspectVisit/${item.icon}@2x.png`)"
                      class="visit-entry-item--img"
                      alt=""
                    />
                  </van-badge>
                </template>
                <template v-else>
                  <img
                    :src="require(`@/assets/images/inspectVisit/${item.icon}@2x.png`)"
                    class="visit-entry-item--img"
                    alt=""
                  />
                </template>
                <p class="visit-entry-item--text">{{ item.labelName }}</p>
              </div>
            </van-col>
          </van-row>
        </gb-card>
      </div>
      <!-- 走访记录 -->
      <div class="visit-entry">
        <div class="visit-entry-title">
          <img class="visit-entry-title--img" src="@/assets/images/inspectVisit/title_visit@2x.png" alt="" />
        </div>
        <gb-card shadow class="visit-entry-content">
          <van-row>
            <van-col :span="6" v-for="(item, key) in visitOptions" :key="key" align="center">
              <div class="visit-entry-item" @click="$router.push(item.path)">
                <img :src="item.iconPath" class="visit-entry-item--img" alt="" />
                <p class="visit-entry-item--text">{{ item.text }}</p>
              </div>
            </van-col>
          </van-row>
        </gb-card>
      </div>
    </div>
  </div>
</template>
<script>
import General from '@/api/general'
import InspectVisit from '@/api/inspectVisit'
export default {
  data() {
    return {
      gridOptions: [
        {
          text: '物业管理',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_wygl@2x.png'),
          path: '/propertyManagement'
        },
        {
          text: '校园安全',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_xyaq@2x.png'),
          path: '/campusSecurity'
        },
        {
          text: '护林巡查',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hl@2x.png'),
          path: '/protectForests'
        },
        {
          text: '护路巡查',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hlu@2x.png'),
          path: '/protectRoad'
        },
        {
          text: '护河巡查',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hhe@2x.png'),
          path: '/protectRiver'
        },
        {
          text: '工地监管',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_gdxc@2x.png'),
          path: '/protectSite'
        },
        {
          text: '网格巡查',
          // count: 0,
          iconPath: require('@/assets/images/inspectVisit/icon_grid_point@2x.png'),
          path: '/inspectvisit/inspect/grid/map'
        },
        {
          text: '单位巡查',
          // count: 0,
          iconPath: require('@/assets/images/inspectVisit/icon_grid_company@2x.png'),
          path: '/inspectvisit/inspect/company/map'
        }
      ],
      inspectionOptions: [
        {
          text: '物管巡逻',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_wg@2x.png'),
          path: '/propertyManagement/Record'
        },
        {
          text: '安全巡检',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_aqxj@2x.png'),
          path: '/campusSecurity/Record'
        },
        {
          text: '护林记录',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hlin@2x.png'),
          path: '/protectForests/Record'
        },
        {
          text: '护路记录',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hljl@2x.png'),
          path: '/protectRoad/Record'
        },
        {
          text: '护河记录',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_hhejl@2x.png'),
          path: '/protectRiver/Record'
        },
        {
          text: '工地监管',
          iconPath: require('@/assets/images/inspectVisit/icon_Inspection_jg@2x.png'),
          path: '/protectSite/Record'
        },
        {
          text: '网格记录',
          iconPath: require('@/assets/images/inspectVisit/icon_inspection_point@2x.png'),
          path: '/inspectvisit/inspect/grid/record'
        },
        {
          text: '单位记录',
          iconPath: require('@/assets/images/inspectVisit/icon_inspection_company@2x.png'),
          path: '/inspectvisit/inspect/company/record'
        }
      ],
      personType: {
        1: {
          name: '特殊人员',
          index: 0
        },
        3: {
          name: '关爱人员',
          index: 1
        },
        4: {
          name: '重点青少年',
          index: 2
        }
      },
      personOptions: {},
      visitOptions: [
        {
          text: '走访上报',
          iconPath: require('@/assets/images/inspectVisit/icon_visit_report@2x.png'),
          path: '/inspectvisit/visit/report'
        },
        {
          text: '走访记录',
          iconPath: require('@/assets/images/inspectVisit/icon_visit_record@2x.png')
        }
      ],
      personCount: {}
    }
  },
  created() {
    this.getLabel()
    this.getCount()
  },
  methods: {
    getLabel() {
      General.Region.getLabel({
        labelType: '1,3,4'
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) this.personOptions = data
      })
    },
    getCount() {
      InspectVisit.Init.companyCount().then(res => {
        const { status, data } = res.data
        if (status === 0) this.gridOptions[1].count = data
      })
      InspectVisit.Init.personCount().then(res => {
        const { status, data } = res.data
        if (status === 0) this.personCount = data
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/inspectVisit/index.less';
</style>
